<template>
    <div class="main">
        <div class="search">
            <div class="search1">
                <el-input v-model="input" placeholder="请输入教室号码" prefix-icon="el-icon-search"></el-input>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column type="expand">
                    <template>
                        <el-input></el-input>
                    </template>
                    <template slot-scope="props">
                        <el-form label-position="left" class="demo-table-expand">
                            <el-form-item label="上机节数：">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="上机教室：">
                                <span>{{ props.row.shop }}</span>
                            </el-form-item>
                            <el-form-item label="上机课程：">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="任课教师：">
                                <span>{{ props.row.shopId }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="上机周数：第一周" prop="id">
                </el-table-column>
                <el-table-column label="教工号：2018081605" prop="name">
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="200" @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        id: '周一',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周二',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周三',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周四',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周五',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周六',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '周天',
        name: '好滋好味鸡蛋仔',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      currentPage: 1,
      input2: ''
    }
  },
  methods: {
    current_change: function (currentPage) {
      console.log(currentPage)
      this.currentPage = currentPage
    }
  }
}
</script>

<style lang="less" scoped>
.main{
    height: 100%;
    width: 100%;
    overflow: auto;
    .search{
        height: 8%;
        background-color: white;
        box-shadow: 0 5px 10px 5px  #99a9bf;
        .search1{
            height: 50%;
            width: 20%;
            position: relative;
            top: 15px;
            left: 70%;
        }
    }
    .table{
        height:72%;
        width: 80%;
        overflow: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,0);
        position: relative;
        top: 50px;
        .el-pagination{
            position: relative;
            top: 10px;
        }
    }
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
